Line chart graph is very usefull to show sell and purchase graph layout of monthly, weekly, yearly as we want.
To create line graph:
first ,we create a index.php file to show garph and second, create get_line_chart.php to get data fron my sql database.
index.php
|
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<html> <head> <title>Line Graph</title> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(load_chart_data); function load_chart_data() { $.ajax({ url: 'get_line_chart.php', type: 'POST', data: {get_chart: true}, dataType: 'JSON', success: function(chart_values) { console.log(chart_values); // take a peek on the values (browser console) draw_chart(chart_values); } }); } function draw_chart(chart_values) { var data = google.visualization.arrayToDataTable(chart_values); var options = { title: 'Your super chart!', vAxis: {title: 'Calls', titleTextStyle: {italic: false}}, hAxis: {title: 'date', titleTextStyle: {italic: false}}, }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </body> </html> |
get_line_chart.php
|
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<?php if(isset($_POST['get_chart'])) { // connect to database mysqli blah blah // sample select count, date from your table_name (this is just a sample!) // $query = mysqli_query($connection, 'SELECT count, date FROM table_name'); blah blah // while($row = $query->fetch_assoc()) { // $result[] = $row; // blah // } $result = array( array('count' => 10, 'date' => '1'), array('count' => 5, 'date' => '2'), array('count' => 20, 'date' => '3'), array('count' => 15, 'date' => '4'), array('count' => 50, 'date' => '5'), array('count' => 28, 'date' => '6'), array('count' => 40, 'date' => '7'), array('count' => 10, 'date' => '8'), array('count' => 15, 'date' => '9'), array('count' => 20, 'date' => '10'), array('count' => 25, 'date' => '11'), array('count' => 22, 'date' => '12'), array('count' => 28, 'date' => '13'), array('count' => 26, 'date' => '14'), array('count' => 10, 'date' => '15'), array('count' => 15, 'date' => '16'), array('count' => 20, 'date' => '17'), array('count' => 25, 'date' => '18'), array('count' => 22, 'date' => '19'), array('count' => 28, 'date' => '20'), array('count' => 26, 'date' => '21'), array('count' => 10, 'date' => '22'), array('count' => 15, 'date' => '23'), array('count' => 20, 'date' => '24'), array('count' => 25, 'date' => '26'), array('count' => 22, 'date' => '27'), array('count' => 28, 'date' => '28'), array('count' => 26, 'date' => '29'), array('count' => 26, 'date' => '30'), array('count' => 26, 'date' => '31'), ); $final = array(); $headers = array_keys(reset($result)); foreach($result as $key => $value) { $final[] = array(($value['date']), $value['count']); } // put the header and prepend it array_unshift($final, $headers); // output it echo json_encode($final); exit; } ?> |
Result:
Pradeep Maurya is the Professional Web Developer & Designer and the Founder of “Tutorials website”. He lives in Delhi and loves to be a self-dependent person. As an owner, he is trying his best to improve this platform day by day. His passion, dedication and quick decision making ability to stand apart from others. He’s an avid blogger and writes on the publications like Dzone, e27.co
